﻿@{
    Layout = "~/Views/Shared/MetroTileBase.cshtml";
}

<div class="ActivityTileMainWrapper" data-bind="click: function(data){window.open(data.Url);}" style="cursor: pointer;">

    <h1 data-bind="text: DatePublished.toDateTime().format('mmm dd, yyyy')"></h1>
    <h2 data-bind="text: Subtitle"></h2>

    <div class="ActivityMaterial">
        <!-- ko if: ImageUrl -->
            <img data-bind="attr: {src: ImageUrl}" border="0" />
        <!-- /ko -->
        <!-- ko if: EmbedUrl -->
            <div data-bind="style: { backgroundImage: EmbedImageCssUrl }, attr: {embedurl: EmbedUrl}" style="cursor: pointer; width: 160px; height: 120px; background-repeat: no-repeat; background-position:center center;">
                <div class="Icon Fill MoviePlay" data-bind="click: $root.embedVideoPlayClick, clickBubble: false"></div>
            </div>
        <!-- /ko -->
    </div>

    <div class="ExtraInfoWrapper">
        <!-- ko if: GoogleMiniMapImageCssUrl -->
        <div data-bind="style: { background: GoogleMiniMapImageCssUrl }" style="width: 100px; height: 50px;"></div>
        <!-- /ko -->
    </div>

</div>